<style lang="scss" scoped>
  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .el-form-item {
      width: 300px;
    }
  }
</style>
<template>
  <page-box>
    <div class="ui-search-box" slot="search-form">
      <el-form class="ui-search-form" label-width="120px" :model="params" ref="form">
        <el-form-item label="宿舍楼" prop="buildingNo">
          <el-select v-model="params.buildingNo" size="mini" placeholder="请选择"
                     @change="handleChange2"
                     clearable>
            <el-option
              v-for="item in buildingNoList"
              :key="item.buildingNo"
              :label="item.buildingNo"
              :value="item.buildingNo">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍号" prop="dorNo">
          <el-select v-model="params.dorNo" size="mini" placeholder="请选择" clearable>
            <el-option
              v-for="(item,index) in paramsDorNoList"
              :key="index"
              :label="item.dorNo"
              :value="item.dorNo">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="每页数据">
          <el-select size="mini" class="ui-item-reset" v-model="params.pageSize">
            <el-option label="5" :value="5"></el-option>
            <el-option label="10" :value="10"></el-option>
            <el-option label="20" :value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="ui-search-btus">
        <el-button type="primary" size="mini" @click="getData">搜索</el-button>
        <el-button size="mini" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>宿舍列表</div>
        <div>
          <el-button type="primary" size="mini" @click="open">新增</el-button>
          <el-button type="primary" size="mini" @click="assignStu">分配学生</el-button>
          <el-button type="primary" size="mini" @click="assignAdmin">分配管理员</el-button>

        </div>
      </div>
      <el-table :data="dormitoryListAll" @selection-change="handleSelectionChange" :cell-style="cellStyle"
                :header-cell-style="rowClass" v-loading="tabLoading">
        <el-table-column type="selection" width="55"></el-table-column>
        <!--        <el-table-column prop="dorId" label="宿舍id"></el-table-column>-->
        <el-table-column prop="buildingNo" label="宿舍楼"></el-table-column>
        <el-table-column prop="dorNo" label="宿舍号"></el-table-column>
        <el-table-column prop="stuCount" label="已分配学生人数"></el-table-column>
        <el-table-column prop="adminCount" label="已分配管理员人数"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status===1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="checkDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="success" @click="openEdit(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="ui-pagination"
        @current-change="changPageNum"
        layout="total, prev, pager, next"
        :current-page="this.params.pageNum"
        :page-size="this.params.pageSize"
        :total="total">
      </el-pagination>
      <add-item v-bind:dormitoryItem.sync='dormitoryItem' @submit="addItem" ref="addDor"></add-item>
      <edit-item v-bind:dormitoryItem.sync='dormitoryItem' @submit="editItem" ref="editDor"></edit-item>

      <el-dialog title="请选择分配的学生" :visible.sync="addAssignStudentFlag" width="35%">
        <div class="ui-box leave_dialog">
          <el-form :model="studentItem" label-width="150px" class="form" ref="formStu">
            <el-form-item label="选择学生" prop="userId">
              <el-cascader v-model="studentItem.userId" :options="studentListAll" :props="propsOption"
                           size="mini" :show-all-levels="false" @change="handleChangeStu" clearable
                           filterable></el-cascader>
            </el-form-item>
            <el-form-item label="选择宿舍楼" prop="buildingNo">
              <el-select v-model="studentItem.buildingNo" size="mini" placeholder="请选择"
                         @change="handleChange"
                         >
                <el-option
                  v-for="item in buildingNoList"
                  :key="item.buildingNo"
                  :label="item.buildingNo"
                  :value="item.buildingNo">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择宿舍号" prop="dorNo">
              <el-select v-model="studentItem.dorNo" size="mini" placeholder="请选择" clearable>
                <el-option
                  v-for="(item,index) in dorNoList"
                  :key="index"
                  :label="item.dorNo"
                  :value="item.dorId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addAssignStudentFlag = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="addAssignStudents" size="mini">确 定</el-button>
          </div>
        </div>
      </el-dialog>


      <el-dialog title="请选择分配的管理员" :visible.sync="addAssignAdminFlag" width="35%">
        <div class="ui-box leave_dialog">
          <el-form :model="adminItem" label-width="150px" ref="form" class="form">
            <el-form-item label="选择管理员" prop="userId">
              <el-cascader v-model="adminItem.userId" :options="adminListAll" :props="propsOption2"
                           size="mini"  filterable></el-cascader>
            </el-form-item>
            <el-form-item label="选择宿舍楼" prop="buildingNo">
              <el-select v-model="adminItem.buildingNo" size="mini" placeholder="请选择"
                         @change="handleChange"
                         clearable>
                <el-option
                  v-for="item in buildingNoList"
                  :key="item.buildingNo"
                  :label="item.buildingNo"
                  :value="item.buildingNo">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择宿舍号" prop="dorNo">
              <el-select v-model="adminItem.dorNo" size="mini" placeholder="请选择" clearable>
                <el-option
                  v-for="(item,index) in dorNoList"
                  :key="index"
                  :label="item.dorNo"
                  :value="item.dorId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addAssignAdminFlag = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="addAssignAdmins" size="mini">确 定</el-button>
          </div>
        </div>
      </el-dialog>
      <loading v-if="showLoading"></loading>
    </div>
  </page-box>
</template>
<script>
  import pageBox from '@/components/pageBox'
  import addItem from '@/components/dormitory/addItem.vue'
  import editItem from '@/components/dormitory/editItem.vue'
  import loading from '@/components/loading.vue'

  export default {
    name: 'dormitoryList',
    components: {
      pageBox, addItem, editItem, loading
    },
    data() {
      return {
        exportList: [],
        params: {
          dorNo: '',
          buildingNo: '',
          pageNum: 1,
          pageSize: 10,
        },
        total: 0,
        tabLoading: false,
        showLoading: false,
        addAssignStudentFlag: false,
        addAssignAdminFlag: false,
        studentListAll: [],
        studentList: [],
        majorList: [],
        propsOption: {
          multiple: true,
          label: "stuMajor",
          value: "userId",
          // checkStrictly: true,
          // expandTrigger: "hover",
          disabled: "select",
          emitPath: false,
        },
        studentItem: {
          userId: '',
          buildingNo: '',
          dorNo: '',
        },
        dormitoryListAll: [],
        dormitoryItem: {
          buildingNo: '',
          dorNo: ''
        },
        adminListAll: [],
        adminList: [],
        propsOption2: {
          multiple: true,
          label: "adminName",
          value: "userId",
          checkStrictly: true,
          // expandTrigger: "hover",
          disabled: "select",
          emitPath: false,
        },
        adminItem: {
          userId: '',
          buildingNo: '',
          dorNo: '',
        },
        buildingNoList: [],
        dorNoList: [],
        paramsDorNoList: [],
      }
    },
    created() {
      this.getData()
      // this.getStudent()
      this.getBuildingNo()
      // this.getAdmin()
    },

    methods: {
      addAssignStudents() {
        // this.tabLoading = true
        let dorId = this.studentItem.dorNo
        post('/pms_api/dormitory/assign/student', {'dorId': dorId, 'userIds': this.studentItem.userId}).then(res => {
          this.addAssignStudentFlag = false;
          this.getStudent()
          this.getData()
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      addAssignAdmins() {
        // this.tabLoading = true
        let dorId = this.adminItem.dorNo
        post('/pms_api/dormitory/assign/admin', {'dorId': dorId, 'userIds': this.adminItem.userId}).then(res => {
          this.addAssignAdminFlag = false;
          this.getData()
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      handleChange(buildingNo) {
        this.studentItem.dorNo = ''
        this.adminItem.dorNo = ''
        post('/pms_api/dormitory/list', {'buildingNo': buildingNo}).then(res => {
          this.dorNoList = res.data
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      handleChange2(buildingNo) {
        post('/pms_api/dormitory/list', {'buildingNo': buildingNo}).then(res => {
          this.paramsDorNoList = res.data
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      assignStu() {
        this.studentItem.userId = ''
        this.studentItem.major = ''
        this.studentItem.dorNo = ''
        this.studentItem.buildingNo = ''
        this.getStudent()
        this.addAssignStudentFlag = true;
      },
      assignAdmin() {
        this.adminItem.userId = ''
        this.adminItem.dorNo = ''
        this.adminItem.buildingNo = ''
        this.getAdmin()
        this.addAssignAdminFlag = true;
      },
      getAdmin() {
        post('/pms_api/admin/showList').then(res => {
          this.adminListAll = res.data.allAdmin;
          this.adminList = res.data.showAdmin;
          for (let i in this.adminList) {
            for (let j in this.adminListAll) {
              if (this.adminList[i].userId === this.adminListAll[j].userId) {
                this.adminListAll[j].select = true;
              }
            }
          }
        }).catch(err => {
          this.tabLoading = false;
          console.log(err)
        })
      },
      handleChangeStu(value) {
        console.log('value', value)
      },
      getStudent() {
        post('/pms_api/student/showList').then(res => {
          this.studentListAll = res.data.allStudent;
          this.studentList = res.data.showStudent;
          this.majorList = res.data.majorList;
          for (let i in this.studentList) {
            for (let j in this.studentListAll) {
              if (this.studentList[i].userId === this.studentListAll[j].userId) {
                this.studentListAll[j].select = true
              }
            }
          }
          let studentListAllTmp = []
          let indexTmp = 0
          for (let i in this.majorList) {
            studentListAllTmp.push(this.majorList[i])
            indexTmp++
          }
          for (let i in studentListAllTmp) {
            studentListAllTmp[i].children = []
          }
          for (let i in studentListAllTmp) {
            for (let j in this.studentListAll) {
              if (studentListAllTmp[i].stuMajor === this.studentListAll[j].stuMajor) {
                this.studentListAll[j].stuMajor = this.studentListAll[j].stuName
                studentListAllTmp[i].children.push(this.studentListAll[j])
              }
            }
          }
          this.studentListAll = studentListAllTmp
          console.log(studentListAllTmp)
        }).catch(err => {
          this.tabLoading = false;
          console.log(err)
        })
      },
      changPageNum(val) {
        this.params.pageNum = val
        this.getData()
      },
      getBuildingNo() {
        post('/pms_api/dormitory/list', {'type': 1}).then(res => {
          this.buildingNoList = res.data
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      getData() {
        post('/pms_api/dormitory/list', this.params).then(res => {
          this.dormitoryListAll = res.data
          this.total = res.totalPages
          this.tabLoading = false;
          post('/pms_api/dormitory/list').then(res => {
            this.paramsDorNoList = res.data
            this.tabLoading = false;
          }).catch(err => {
            this.tabLoading = false
            console.log(err)
          })
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      getDormitory(item) {
        post(`/pms_api/dormitory/list/`, {'dorId': item.dorId}).then(res => {
          console.log('res', res)
          this.dormitoryItem = res.data[0]
        }).catch(err => {
          console.log(err)
        })
      },
      addItem() {
        // this.tabLoading = true
        post('/pms_api/dormitory/add', this.dormitoryItem).then(res => {
          this.$refs.addDor.addDialogVisible = false;
          this.getData();
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
        this.$refs.addDor.addDialogVisible = false;
      },
      editItem() {
        // this.tabLoading = true;
        post('/pms_api/dormitory/edit', this.dormitoryItem).then(res => {
          this.$refs.editDor.editDialogVisible = false;
          console.log('res', res);
          this.getData();
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
        this.$refs.editDor.addDialogVisible = false;
      },
      open() {
        this.$refs.addDor.openWindow('新增宿舍')
      },
      openEdit(item) {
        this.getDormitory(item);
        this.$refs.editDor.openWindow('修改宿舍信息', this.dormitoryItem);
      },
      checkDetail(item) {
        this.$router.push({
          path: '/dormitoryDetail',
          query: {
            title: item.name,
            id: item.userId,
            dorId: item.dorId
          }
        })
      },
      deleteItem(item) {
        // this.tabLoading = true
        post('/pms_api/dormitory/delete', {'dorId': item.dorId}).then(res => {
          this.getData()
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      handleSelectionChange(val) {
        this.exportList = val
      },
      exportExcel() {
        let sexName = {1: '男', 2: '女'};
        if (this.exportList.length > 0) {
          this.exportList.forEach(item => {
            item.sexName = sexName[item.sex]
          });
          const tHeader = ['ID', '用户id', '用户名', '性别', '年龄', '邮箱', '手机号', '创建时间', '修改时间', '状态', '说明', '密钥'];
          const filterVal = ['id', 'userId', 'username', 'sexname', 'age', 'email', 'phone', 'createTime', 'updateTime', 'status', 'description', 'salt'];
          const list = this.exportList;
          this.$getGlobal.exportFun('用户列表', tHeader, filterVal, list);
        } else {
          this.$message.error('请先选择需要导出的列表项');
        }
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getData()
      },
    }
  }
</script>


